<template>
	<view class="container">
		<!-- <loading :show="loading_show"></loading> -->
		<u-popup :show="show" @close="close" :safeAreaInsetBottom="false" mode="center" round="50" bgColor="transparent" :duration="300">
			<view class="painter">
				<view class="preview_img_box" :style="{'background':`linear-gradient(to top,${templateConfig.page.themeColor}  0%,${getRgb(templateConfig.page.themeColor,0.9)} 100%)`}">
					<view class="img_back">
						<image class="goods_img" :src="goodsData.previewUrl" mode="widthFix"/>
						<view class="head_box">
							<text class="head_text" >{{'￥'+goodsData.goodsPrice}}</text>
							<!-- <text class="head_text_non" v-else>建店看价格</text> -->
							<text class="head_text_title">{{goodsData.goodsName}}</text>
						</view>
					</view>
					<!-- 二维码区域 -->
					<view class="qrcode_box">
						<view class="code_item_left">
							<text class="desc">价格及活动具有时效性</text>
							<text class="headTitle">{{goodsData.businessName}}</text>
						</view>
						<view class="code_item_right">
							<image class="code_image" :src="codeImg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				
				<view class="close_box_">
					<view class="button_item">
						<button open-type="share" class="button_share"></button>
						<view class="image_box image_box1">
							<image src="../../static/images/poster/Wechat.png" mode=""></image>
						</view>
						<text class="text1">微信好友</text>
					</view>
					<view class="button_item" @click="savePoster">
						<view class="image_box image_box2">
							<image src="../../static/images/poster/download.png" mode=""></image>
						</view>
						<text>{{canvasImg?'保存海报':'绘制中...'}}</text>
					</view>
					<view class="button_item" @click="close">
						<view class="image_box">
							<image src="../../static/images/poster/close.png" mode=""></image>
						</view>
						<text>取消</text>
					</view>
				</view>
			</view>
		</u-popup>
		<l-painter
			v-if="render"
			isCanvasToTempFilePath
			@success="renderSuccess"
			css="width: 550rpx;height: 900rpx;"
			hidden
			ref="painter"
		>
			<!-- 红色背景 -->
			<l-painter-view
				css="border-radius: 20rpx; width: 550rpx; position: relative; padding: 25rpx; box-sizing: border-box; background: linear-gradient(to bottom, #ff0000 0%, #ff4c4c 100%);"
			>
				<!-- 白色容器 -->
				<l-painter-view
					css=" border-radius: 20rpx; width: 100%; background: #fff; padding: 25rpx;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;"
				>
					<!-- 主图 -->
					<l-painter-image
						:src="goodsData.previewUrl"
						css="width: 450rpx;height: 450rpx;object-fit: cover; border-radius: 20rpx;"
					/>
					<!-- 商品标题 -->
					<l-painter-view
						css="border-radius: 20rpx; width: 100%; padding-top: 20rpx; display: flex; flex-direction: column;"
					>
						<l-painter-text
							:text="'￥'+goodsData.goodsPrice"
							css="color: #ff0000; font-size: 36rpx;"
						/>
						<!-- <l-painter-text
							v-else
							text="建店看价格"
							css="color: #868686; font-size: 30rpx;"
						/> -->
						<l-painter-text
							:text="goodsData.goodsName"
							css="color: #000; font-size: 32rpx; margin-top: 10rpx; font-weight: bold;padding-bottom: 20rpx;"
						/>
					</l-painter-view>
				</l-painter-view>
				<!-- 二维码区域 -->
				<l-painter-view
					css=" border-radius: 20rpx; width: 100%; padding-top: 20rpx;display: flex; justify-content: space-between;"
				>
					<l-painter-view css="width: 400rpx;height: 150rpx;border-radius: 20rpx;display: flex;flex-direction: column;justify-content: space-around;">
						<l-painter-text css="font-size: 26rpx;color: #fff;" text="价格及活动具有时效性"></l-painter-text>
						<l-painter-text css="font-size: 40rpx;font-weight: bold;color: #fff;" :text="goodsData.businessName">{{goodsData.businessName}}</l-painter-text>
					</l-painter-view>
					<l-painter-view css="width: 150rpx;height: 150rpx;">
						<l-painter-image
							:src="codeImg"
							css="width: 150rpx;height: 150rpx;object-fit: cover; border-radius: 20rpx;"
						/>
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	import { getWxProgramQRCode, getApplicationPlugsRecommendedList } from "../../static/utils/api.js"
	import { getRgb } from '../../static/utils/utils.js';

	export default {
		name:"poster",
		props: ['goodsData', 'show'],
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				codeImg: '',
				canvasImg: '',
				render: false,
				loading_show: false,
			};
		},
		watch: {
			show (newVal, oldVal) {
				if (newVal) {
					this.render = true;
				}
			},
			goodsData () {
				this.createPoster();
				console.log(this.goodsData, 'goodsData')
			},
		},
		methods: {
			getRgb,
			close () {
				this.$emit('closeShare');
			},
			renderSuccess (res) {
				this.canvasImg = res;
			},
			// 生成海报
			createPoster () {
				let postdata = {
					parms: this.goodsData.id
				}
				getWxProgramQRCode(postdata).then(res => {
					this.codeImg = res.body;
				})
			},
			
			// 保存海报
			savePoster () {
				if (!this.canvasImg) return uni.$showMsg('正在绘制中，请稍等');
				uni.showLoading({
					title: '保存中'
				})
				this.$refs.painter.canvasToTempFilePathSync({
					// 在nvue里是jpeg
					fileType: "jpg",
					pathType: "url",
					quality: 1,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.hideLoading();
								uni.showToast({
									icon:'none',
									title:'保存成功'
								})
								
							},
							fail: (err) => {
								uni.hideLoading();
							}
						})
					},
					
				});
			},
		},
		onShareAppMessage() {
			
		    return {
		        title: this.goodsData.goodsName,
		        path: '/pages/index/detail?id=' + this.goodsData.id,
		        imageUrl: ''
		    }
		}
	}
</script>

<style lang="less" scoped>
	.container{
		
		.painter{
			width: 550rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
				
			.preview_img_box{
				width: 550rpx;
				// height: 900rpx;
				padding: 25rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: linear-gradient(to top, #ff0000 0%, #ff4c4c 100%);
				
				.img_back{
					width: 100%;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.goods_img{
						width: 100%;
						border-radius: 20rpx;
					}
					.head_box{
						border-radius: 20rpx;
						width: 100%;
						display: flex;
						flex-direction: column;
						
						.head_text{
							color: #ff0000;
							font-size: 36rpx;
							padding: 20rpx 0;
						}
						.head_text_non{
							color: #868686;
							font-size: 30rpx;
							padding: 20rpx 0;
						}
						.head_text_title{
							color: #000;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
				.qrcode_box{
					width: 100%;
					border-radius: 20rpx;
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					
					.code_item_left{
						width: 400rpx;
						height: 150rpx;
						border-radius: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
						.desc{
							font-size: 26rpx;
							color: #fff;
						}
						.headTitle{
							font-size: 40rpx;
							font-weight: bold;
							color: #fff;
						}
					}
					.code_item_right{
						width: 150rpx;
						height: 150rpx;
						display: flex;
						justify-content: center;
						
						.code_image{
							width: 150rpx;
							height: 150rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
			
			.close_box_{
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-top: 60rpx;
				
				.button_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					
					.button_share{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background: none;
						padding: 0;
						position: absolute;
						left: 0;
						top: 0;
					}
					.button_share::after{
						border: none;
					}
					
					.image_box{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}
					}
					.image_box1 {
						background-image: linear-gradient(to bottom, #00DB66, #52db97);
					}
					.image_box2 {
						background-image: linear-gradient(to bottom, #FF4450, #ff777e);
					}
					.image_box3 {
						background-image: linear-gradient(to bottom, #00DB66, #52db97);
					}
					
					text{
						padding-top: 16rpx;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>